<!DOCTYPE html>
<html>-
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<!-- 样式类名操作的操作：  针对css3、添加、移除、切换的元素类名操作  
		    addClass()           有参  1个参和多个参
			                     语法：addclass("类名")
								 <p class="类名">
								 语法：addClass("类名1 类名2");
								 <p class="类名1,类名2">
								 功能：匹配元素集合中的所有元素
								      添加一个或多个类名操作
								 理解：元素添加存在的样式
								 
			removeClass()        功能：匹配元素集合中的所有元素
								      移除一个或多个类名操作
									  
			toggleClass()        切换
			                     功能：如果元素有类名，则移除；没有则添加
			hasClass()           功能：检查匹配元素集合中是否包含指定类名
			                     返回值：bool
		-->
		<!-- 要求： 1.JQ引入
		           2.html:  两个div   id="targetElement"和id="resultArea"
				            div   id="targetElement"
							4个按钮  id="addClassBtn"
							        id="removeClassBtn"
									id="toggleClassBtn"
									id="hasClassBtn"
							div   id="resultArea"
				   3.css： .bgColor{  300*300   背景颜色随意}		
				           .broders{ 10个像素实线找红色边框   倒角画圆}
		 -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.bgColor{
				width: 300px;
				height: 300px;
				background-color: #aaffff;
			}
			.broders{
				border: 10px solid #ff0000;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
    	<div id="resultArea"></div>
		
		<script>
			//  1.点击 添加类名 按钮  添加效果【样式】  300*300 背景色：红色
			$("#addClassBtn").click(function(){
				//div添加样式---存在样式：类名
				$("#targetElement").addClass("bgColor");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			});
			//  2.点击 添加类名 按钮 添加效果【样式】
			//    300*300  背景颜色红色  圆  外层  10px黄色的框框
			$("#addClassBtn").click(function(){
				//div添加样式---存在样式：类名
				$("#targetElement").addClass("bgColor broders");
				$("#resultArea").html("<h4>添加样式类名：bgColor</h4>");
			});
			//  3.点击 移除类名 按钮 添加效果【样式】  还原
			$("#removeClassBtn").click(function(){
				$("#targetElement").removeClass("broders");  //removeClass中可以有空格，但最好移除
				$("#resultArea").html("<h4>移除样式类名：bgColor</h4>");
			});
			
			//  4.点击  切换类名  按钮  添加效果【样式】
			//  300*300  背景颜色为红色  圆  外层 10px 黄色框框
			$("#toggleClassBtn").click(function(){
				// div添加样式---存在样式：类名
				$("#targetElement").toggleClass("broders");
				$("#resultArea").html("<h4>切换样式类名：broders</h4>");
			});
			//  5.点击  切换类名  按钮  添加效果【样式】
			//  去掉 300*300 背景颜色：红色
			$("#toggleClassBtn").click(function(){
				$("#targetElement").toggleClass("bgColor");
				$("#resultArea").html("<h4>切换样式类名：broders</h4>");
			});
			
			//  6.检查类名是否存在： true存在  false不存在
			$("#hasClassBtn").click(function(){
				var hc=$("#targetElement").hasClass("broders");
				$("#resultArea").text("检查当前样式是否存在："+hc);
			});
		</script>
	</body>
</html>